<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
    	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
    	<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport" />
		<title></title>
		<link href="../../css/lanai-ui.css" rel="stylesheet" />
	</head>
	<body>
		<section class="content no-padding">
			<div class="box box-widget no-shadow">
				<div class="box-body">
					<blockquote class="bg-gray-light blockquote-danger"><small>注意 : 验证采用bootstrap Validator，请自行官网下载。</small></blockquote>					
					<form role="form" id="form1">	
						<h3>文本显示</h3>
						<div class="row">
							<div class="col-sm-3 border-right">
								<h1><code>h1</code>. Lanai</h1>
		                        <h2><code>h2</code>. Lanai</h2>
		                        <h3><code>h3</code>. Lanai</h3>
		                        <h4><code>h4</code>. Lanai</h4>
		                        <h5><code>h5</code>. Lanai</h5>
		                        <h6><code>h6</code>. Lanai</h6>
							</div>
							<div class="col-sm-3 border-right">
								<p class="lead">Lanai 强调文字加黑显示 <code>.lead</code></p>
								<p>以下使用样式<code>.text-*</code></p>
		                        <p class="text-green">Lanai 文本颜色 <code>.text-green</code></p>
		                        <p class="text-aqua">Lanai 文本颜色 <code>.text-aqua</code></p>
		                        <p class="text-light-blue">Lanai 文本颜色 <code>.text-light-blue</code></p>
		                        <p class="text-red">Lanai 文本颜色 <code>.text-red</code></p>
		                        <p class="text-yellow">Lanai 文本颜色 <code>.text-yellow</code></p>
		                        <p class="text-muted">Lanai 文本颜色 <code>.text-muted</code></p>
							</div>
							<div class="col-sm-3 border-right">
								<h5>圆角按钮</h5>								
								<div class="form-group">
									<div class="input-group input-group-sm">
										<span class="label-control label-default">.label-control .label-default</span>
										<div class="input-group-btn">
											<button class="btn btn-default">.btn .btn-default</button>
										</div>
									</div>
								</div>
								<div class="form-group">
									<div class="input-group">
										<span class="label-control label-success"> .label-success</span>
										<div class="input-group-btn">
											<button class="btn btn-danger">.btn-danger</button>
										</div>
									</div>
								</div>
								<div class="form-group">
									<div class="input-group input-group-lg">
										<span class="label-control label-primary">.label-primary</span>
										<div class="input-group-btn">
											<button class="btn btn-success">.btn-success</button>
										</div>
									</div>									
								</div>
								<h5>平角按钮</h5>
								<p><code>.no-radius</code>样式<br/><code>.no-raduis-childs</code>会去掉所有子元素的圆角设定</p>
								<div class="form-group">
									<div class="input-group">
										<span class="label-control label-default">.label-primary</span>
										<div class="input-group-btn">
											<button class="btn btn-success no-radius">.btn-success</button>
										</div>
									</div>									
								</div>
							</div>
							<div class="col-sm-3"></div>
						</div>
						<h3>简单输入框<code>.form-control</code></h3>
						<div class="row">
							<div class="col-sm-4">
								<div class="form-group">
									<label for="demo-lg">超大输入框<code>.input-lg</code></label>
									<input type="text" class="form-control input-lg" id="demo-lg" placeholder="请输入内容...">
								</div>
							</div>
							<div class="col-sm-4">
								<div class="form-group">
									<label for="demo-default">默认输入框</label>
									<input type="text" class="form-control" id="demo-default" placeholder="请输入内容...">
								</div>
							</div>
							<div class="col-sm-4">
								<div class="form-group">
									<label for="demo-sm">超小输入框<code>.input-sm</code></label>
									<input type="text" class="form-control input-sm" id="demo-sm" placeholder="请输入内容...">						
								</div>
							</div>
						</div>
						<div class="row">
							<div class="col-sm-4">
								<div class="form-group">
				                 	<label for="demo-disabled">禁用输入框<code>disabled</code>属性</label>
				                  	<input type="text" class="form-control" id="demo-disabled" placeholder="请输入内容 ..." disabled="">
				                </div>
							</div>
							<div class="col-sm-4">
								<div class="form-group">
				                  <label for="demo-password">密码输入框（必填项)</label>
				                  <input type="password" class="form-control" id="demo-password" name="demopassword" placeholder="请输入密码 ...">
				                </div>
							</div>	
							<div class="col-sm-4">
								<div class="form-group">
				                	<label for="demo-select">普通下拉表</label>
				                	<select class="form-control" id="demo-select">
				                		<option>Java</option>
				                		<option>C#</option>
				                		<option>PHP</option>
				                	</select>
				                </div>
							</div>
						</div>
						<h3>多选&单选</h3>
						<div class="row">
							<div class="col-sm-12">
								<div class="form-group">
									<div class="checkbox checkbox-inline">
				                        <input id="checkbox1" type="checkbox" checked>
				                        <label for="checkbox1">
				                            	默认样式
				                        </label>
				                    </div>
				                    <div class="checkbox checkbox-inline checkbox-primary">
				                        <input id="checkbox2" type="checkbox" checked>
				                        <label for="checkbox2">
				                            	常用<code>.checkbox-primary</code>
				                        </label>
				                    </div>
				                    <div class="checkbox checkbox-inline checkbox-success">
				                        <input id="checkbox3" type="checkbox" checked>
				                        <label for="checkbox3">
				                           	 成功<code>.checkbox-success</code>
				                        </label>
				                    </div>
				                    <div class="checkbox checkbox-inline checkbox-info">
				                        <input id="checkbox4" type="checkbox" checked>
				                        <label for="checkbox4">
				                           	 提醒<code>.checkbox-info</code>
				                        </label>
				                    </div>
				                    <div class="checkbox checkbox-inline checkbox-warning">
				                        <input id="checkbox5" type="checkbox" checked>
				                        <label for="checkbox5">
				                           	 警示<code>.checkbox-warning</code>
				                        </label>
				                    </div>
				                    <div class="checkbox checkbox-inline checkbox-danger">
				                        <input id="checkbox6" type="checkbox" checked>
				                        <label for="checkbox6">
										危险<code>.checkbox-danger</code>		                        
				                        </label>
				                    </div>				                    
				                    <div class="checkbox checkbox-inline">
				                        <input id="checkbox7" type="checkbox" disabled>
				                        <label for="checkbox7">
											禁用(以上样式通用)	                        
				                        </label>
				                    </div>
								</div>
							</div>
						</div>
						<div class="row">
							<div class="col-sm-12">
								<div class="radio radio-inline">
	                                <input type="radio" name="radio1" id="radio1" value="option1" checked>
	                                <label for="radio1">
	                                    	默认
	                                </label>
	                            </div>
	                            <div class="radio radio-inline radio-primary">
	                                <input type="radio" name="radio1" id="radio2" value="option2">
	                                <label for="radio2">
	                                    	常用<code>.radio-primary</code>
	                                </label>
	                            </div>
	                             <div class="radio radio-inline radio-success">
	                                <input type="radio" name="radio1" id="radio3" value="option3">
	                                <label for="radio3">
	                                    	绿色<code>.radio-success</code>
	                                </label>
	                            </div>
	                             <div class="radio radio-inline radio-info">
	                                <input type="radio" name="radio1" id="radio5" value="option5">
	                                <label for="radio5">
	                                    	提醒<code>.radio-info</code>
	                                </label>
	                            </div>
	                             <div class="radio radio-inline radio-warning">
	                                <input type="radio" name="radio1" id="radio6" value="option6">
	                                <label for="radio6">
	                                    	警示<code>.radio-warning</code>
	                                </label>
	                            </div>
	                            <div class="radio radio-inline radio-danger">
	                                <input type="radio" name="radio1" id="radio4" value="option4">
	                                <label for="radio4">
	                                    	危险<code>.radio-danger</code>
	                                </label>
	                            </div>
	                            <div class="radio radio-inline">
	                                <input type="radio" name="radio1" id="radio7" value="option7" disabled>
	                                <label for="radio7">
	                                    	禁用(以上样式通用)	      
	                                </label>
	                            </div>
							</div>
						</div>
						<h3>方框风格&图标<code>.input-group</code></h3>						
						<div class="row">
							<div class="col-sm-4">
								<div class="form-group">
									<div class="input-group">
					                	<span class="input-group-addon">姓名</span>
					                	<input type="text" class="form-control" id="demo-nm" placeholder="请输入您的姓名...">
					                </div>
				                </div>
							</div>
							<div class="col-sm-4">
								<div class="form-group">
									<div class="input-group">
					                	<span class="input-group-addon"><i class="fa fa-language"></i></span>
					                	<select class="form-control" id="demo-select-icons">
					                		<option>Java</option>
					                		<option>C#</option>
					                		<option>PHP</option>
					                	</select>
					                </div>
				               </div>
							</div>							
							<div class="col-sm-4">
								<div class="form-group">
									<div class="input-group">
										<input type="email" class="form-control" placeholder="请输入您的gmail邮箱" id="demo-user-email">
										<span class="input-group-addon">@gmail.com</span>
									</div>
								</div>
							</div>
						</div>
						
						<h3>日期和时间选择</h3>
						<p><a href="http://www.bootcss.com/p/bootstrap-datetimepicker/" target="_blank">访问官网</a>:集成脚本bootstrap-datepicker,使用<code>obj.datetimepicker({});</code>
							</p>
						<div class="row">
							<div class="col-sm-4">
								<div class="form-group">
									<div class="input-group">
					                	<span class="input-group-addon">日期选择</span>
					                	<input type="text" class="form-control" id="demo-date" placeholder="请选择日期..">
					                	<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
					                </div>
				               </div>
							</div>
							
							<div class="col-sm-4">
								<div class="form-group">
									<div class="input-group">
					                	<span class="input-group-addon">日期&时间选择</span>
					                	<input type="text" class="form-control" id="demo-datetime" placeholder="请选择日期..">
					                	<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
					                </div>
				               </div>
							</div>
							<div class="col-sm-4">
								<div class="form-group">
									<div class="input-group">
					                	<span class="input-group-addon">月份选择</span>
					                	<input type="text" class="form-control" id="demo-date-span" placeholder="请选择月份..">
					                	<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
					                </div>
				               </div>
							</div>
						</div>
						<h3>带按钮的输入框(尺寸从大到小)</h3>						
						<div class="row">
							<div class="col-sm-4">
								<p><code>.input-group-lg</code></p>
								<div class="input-group input-group-lg">
		                            <div class="input-group-btn">
		                                <button type="button" class="btn btn-warning no-radius dropdown-toggle" data-toggle="dropdown">
		                                    	北京市
		                                    <span class="fa fa-caret-down"></span>
		                                </button>
		                                <ul class="dropdown-menu">
		                                    <li><a href="#">上海市</a></li>
		                                    <li><a href="#">天津市</a></li>
		                                    <li><a href="#">西安市</a></li>
		                                    <li class="divider"></li>
		                                    <li><a href="#">其他城市</a></li>
		                                </ul>
		                            </div>
		                            <!-- /btn-group -->
		                            <input type="text" class="form-control no-radius" placeholder="请输入街道名称">
		                        </div>
							</div>
							<div class="col-sm-4">
								<div class="input-group">
					                <div class="input-group-btn">
					                  <button type="button" class="btn btn-primary no-radius"><i class="fa fa-search"></i></button>
					                </div>
					                <!-- /btn-group -->
					                <input type="text" class="form-control no-radius">
					            </div>
							</div>
							<div class="col-sm-4">
								<p><code>.input-group-sm</code></p>
								<div class="input-group input-group-sm">					                
					                <input type="text" class="form-control no-radius">
					                <div class="input-group-btn">
					                  <button type="button" class="btn btn-default no-radius"><i class="fa fa-ellipsis-h"></i></button>
					                </div>
					                <!-- /btn-group -->
					            </div>
							</div>
						</div>
						<h3>文本域</h3>
						<div class="row">
							<div class="col-sm-12">
								<textarea class="form-control" rows="3" placeholder="请输入内容 ..."></textarea>
							</div>
						</div>
						<h3>文件或图片上传</h3>
						<p><a href="https://github.com/kartik-v/bootstrap-fileinput" target="_blank">访问官网</a>:集成bootstrap-fileinput,使用<code>obj.fileinput({})</code></p>
						<div class="row">
							<div class="col-sm-12">
								<div class="form-group">
				                    <input id="file-haspreview-noradius" type="file" multiple class="file" data-overwrite-initial="false" data-min-file-count="2">
				                </div>
							</div>
						</div>
						<div class="row">
							<div class="col-sm-4">
								<div class="form-group">
				                    <input id="file-no-preview-simple" type="file" class="file">
				                </div>
							</div>
							<div class="col-sm-4">
								<div class="form-group">
									<div class="input-group">
										<span class="input-group-addon"><i class="fa fa-image"></i></span>
					                    <input id="file-no-preview-img" type="file" class="file">
					                </div>
				               </div>
							</div>
							<div class="col-sm-4">
								<div class="form-group">
				                    <input id="file-no-preview-onlybtn" type="file" class="file">
				                </div>
							</div>
						</div>
					</form>
				</div>
			</div>
		</section>
		<script src="../../js/jquery.min.js"></script>
    	<script src="../../js/lanai-ui.js"></script>
    	<script src="../../plugins/validator/validator.js"></script>
    	<script type="text/javascript">
			$("#file-haspreview-noradius").fileinput({
    			noRadius:true,
    			showPreview:true,
    			showUpload: false,
				showCaption: true,
		        uploadUrl: '#', // you must set a valid URL here else you will get an error
		        allowedFileExtensions : ['jpg', 'png','gif'],
		        overwriteInitial: false,
		        maxFileSize: 1000,
		        maxFilesNum: 10,
		        slugCallback: function(filename) {
		            return filename.replace('(', '_').replace(']', '_');
		        }
			});
			$("#file-no-preview-simple").fileinput({
    			showPreview:false,
    			showUpload: false,
				showCaption: true,
				browseClass: 'btn btn-default'
			});
			$("#file-no-preview-img").fileinput({
				noRadius:true,
    			showPreview:false
			});
			$("#file-no-preview-onlybtn").fileinput({
    			showPreview:false,
    			showUpload: false,
				showCaption: false,				
				browseClass: 'btn btn-danger'
			});
			
    		$(function(){
    			$("#demo-date").datetimepicker({
					format: 'yyyy-mm-dd',//显示格式
					todayHighlight: 1,//今天高亮
					minView: "month",//设置只显示到月份
					startView:2,
					forceParse: 0,
					showMeridian: 1,
					autoclose: 1//选择后自动关闭
					});//日期选择
    			$("#demo-datetime").datetimepicker({
					format: 'yyyy-mm-dd HH:ii',//显示格式
					todayHighlight: 1,//今天高亮
					startView:1,
					forceParse: 0,
					showMeridian: 1,
					autoclose: 1//选择后自动关闭
					});
    			$("#demo-date-span").datetimepicker({
					format: 'mm',//显示格式
					startView:3,
					});
    			
    			
    			$("#form1").bootstrapValidator({
	                fields: {
	                    demopassword: {/*键名username和input name值对应*/
	                        message: '密码不能为空',
	                        validators: {
	                            notEmpty: {/*非空提示*/
	                                message: '请输入密码'
	                            }
	                        }
	                    }
	                }
	            });
    		});
    	</script>
	</body>
</html>
